/* 申请新课程
修改人：曾俊达
时间：2020/6/22 */

<template>
  <el-dialog :title="title"  :visible="visible" :close-on-click-modal="false"
             :before-close="handleClose" width="500px">
    <el-form :model="formData" :rules="rules" ref="formData" label-width="80px">
      
    
      <el-form-item label="课程封面图片地址" prop="avatarUrl">
         <el-upload class="avatar-uploader"  action="" :accept="acceptType" :http-request="beginUpload" :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-progress :percentage="Number(percentage.toFixed(2))"></el-progress>
      </el-form-item>
      <!-- <el-form-item label="申请教师" prop="teacher">
        <el-input v-model="formData.teacher"></el-input>
      </el-form-item> -->

      <el-form-item label="课程类型" prop="courseType">
          <el-select v-model="formData.courseType" style="width:380px" placeholder="请选择课程类型">
            <el-option v-for="item in TYlist" 
            :key="item.id" 
            :label="item.courseType"
            :value="item.courseType">
            </el-option>
          </el-select>
      </el-form-item>
      
      <el-form-item label="课程名称" prop="courseName">
        <el-input v-model="formData.courseName"></el-input>
      </el-form-item>
      <el-form-item label="课程描述" prop="courseDescription">
        <el-input v-model="formData.courseDescription"></el-input>
      </el-form-item>

      
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit"
                 :loading="loading">{{loading?'提交中...':'提交申请'}}</el-button>
      <el-button type="text" @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  //import {getAllRoleList} from "../../../api/modules/role";
  import {add} from "@/api/modules/create_class";
  import {TYpage} from "@/api/modules/courseType";
  import {getCookie} from '@/libs/cookie'
  import OSS from 'ali-oss'
  var upurl = ''
  export default {
    name: "class_edit",
    props: {
      visible: {
        type: Boolean
      },
      // 文件上传的接受的类型  video/* :视频类型， image/*：图片，根据需要判断
      acceptType:{
           type: String,
            default: 'image/*'  
      },
      title: {
        type: String,
        default: '办理入住'
      },
      defaultFormData: {
        type: Object
      },
    },
    data() {
      
      return {
        imageUrl: '',
        percentage: 0,
        checkpoint: null,
        client: null,
        filename: '',
        upurl: '',
        TYlist:'',
        loading: false,
        formData: {
          // building:'',
          // id:'',
          userId:'',
          teacher:'',
          courseType:'',
          courseName:'',
          courseDescription:'',
          avatarUrl:''
        
        },
         rules: {
          courseType: [
            {required: true, message: "课程类型不能为空", trigger: "blur"}
          ],
          courseDescription: [
            {required: true, message: "课程描述不能为空", trigger: "blur"}
          ]
        },
        
        refresh: false
      }
    },
    created(){
      this.getitem();
      this.client = new OSS({
                region: 'oss-cn-hangzhou',
                accessKeyId: 'LTAI4GGkWMN9SyN1AkRK6qCT',
                accessKeySecret: 'sQf4RnuvZM47hXV5XxBazZqyXzJyNU',
                bucket: '0628',
                secure: false
            })
    },
  
    mounted(){
        let user = JSON.parse(getCookie("user") || '{}');
        this.formData.userId = user.id
        this.formData.teacher = user.nickname
        console.log(user.id)
    },

    methods: {
        async ossUpload(filename, file) {
                let _this = this
                try {
                    let result = await _this.client.multipartUpload(filename, file, {
                        progress: async function (p, checkpoint) {
                            _this.checkpoint = checkpoint
                            _this.percentage = p * 100
                        },
                        checkpoint: _this.checkpoint
                    })
                    console.log(result)
                } catch (e) {
                    console.log(e)
                }
            },
      //上传视频
       beginUpload(file) {
          const isWord = ['image/jpeg','image/png',].includes(file.file.type);
                if(!isWord) this.$message.error('视频必须是.jpg或.png');
                else{
                let _this = this
                let filename = file.file.name
                filename = filename.split('.')[0] + '_' + new Date().getTime() + '.' + filename.split('.')[1]
                _this.file = file
                _this.filename = filename
                _this.ossUpload(filename, file.file)
                //保存上传的文件下载地址
                upurl = this.client.signatureUrl(_this.filename);
                this.formData.avatarUrl = upurl
               // console.log(upurl)
                // location.reload();
                }
      },
      getitem(){
        TYpage().then(resp => {
          this.TYlist = resp.data.records;
        })
      },
       //课程类型下拉实现
       getType(filter){
       select(null).then(res =>{
       this.courseType = res.data.courseTypelist
       })
       },
      handleClose() {
        this.$emit('close', this.refresh)
      },
      handleSubmit() {
        this.$refs.formData.validate(valid => {
          if (valid) {
            this.loading = true
            
              add({
                ...this.formData,
              }).then(res => {
              
                this.loading = false
                if (res.success) {
                  this.refresh = true
                  this.toast(res.message)
                  this.handleClose()
                }
              })
           
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
